<template>
    <div class="edu-page-warp">
        <el-card shadow="never" body-style="padding: 24px;">
            <div style="margin-bottom: 15px;overflow: hidden;">
                <el-button
                    type="text"
                    style="float: left;"
                    v-if="type == 2"
                    @click="exportDoc"
                >{{ $t('common.btn.export') }} DOC</el-button>
                <el-button
                    type="text"
                    style="float: left; margin-left: 8px;"
                    v-if="type == 2"
                    @click="exportPdf"
                >{{ $t('common.btn.export') }} PDF</el-button>
                <el-button 
                    size="mini"
                    style="float: right; margin-right: 8px;"
                    @click="back"
                    >返回</el-button>
            </div>
            <h2 style="text-align: center;">{{title}}</h2>
            <div>
                <div v-for="(item,index) in chapterContents" :key="index" style="padding: 24px;">
                    <div slot="header" class="clearfix">
                        <h3 v-if="activeName === 'cn'">{{getLargeFormat(index+1)}} {{item.name}}</h3>
                        <h3 v-if="activeName === 'en'">{{(index+1)}}、 {{item.nameEn}}</h3>
                        <div v-if="item.contentType===0" class="content">
                            <p
                                v-show="activeName==='cn'"
                                v-html="item.content"
                                :ref="'content'+index"
                            ></p>
                            <p
                                class="content"
                                v-show="activeName==='en'"
                                :ref="'contentEn'+index"
                                v-html="item.contentEn"
                            ></p>
                        </div>
                        <div v-else>
                            <p
                                class="content"
                                v-show="activeName==='cn'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentBefore:''"
                            ></p>
                            <p
                                class="content"
                                v-show="activeName==='en'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentBeforeEn:''"
                            ></p>
                            <course-type
                                v-if="item.minorDetailTable && item.minorDetailTable.table === 1"
                                :templateId="templateId"
                                :operationFlag="false"
                                :type="type"
                            />
                            <minor-table
                                v-if="item.minorDetailTable && item.minorDetailTable.table === 2"
                                :templateId="templateId"
                                :operationFlag="false"
                                :type="type"
                                :advancedType="advancedType"
                                :schoolTerm="schoolTerm"
                            ></minor-table>
                            <p
                                class="content"
                                v-show="activeName==='cn'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentAfter:''"
                            ></p>
                            <p
                                class="content"
                                v-show="activeName==='en'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentAfterEn:''"
                            ></p>
                        </div>
                    </div>
                    <hr/>
                </div>
            </div>
        </el-card>   
    </div>
</template>

<script>
import {queryTemplateInfo} from "common/src/api/minor/minorCultureTemplate";
import {findSchoolTermByCultureId} from "common/src/api/minor/minorCultureScheme";
import { getChapterTemplete } from "common/src/api/minor/minorCulturePlanManager";
export default {
    components: { 
        MinorTable: resolve => require(['./MinorTable'], resolve),
        CourseType: resolve => require(['./CourseType'], resolve)
    },
    props: {
        templateId: {
            type: Number,
            default: 0
        },
        type: {
            default: 1,
            type: Number
        },
        title: {
            type: String,
            default: ""
        },
        advancedType: {
            default: '',
            type: String
        }
    },
    data() {
        return {
            activeName: "cn",
            dialogShow: false,
            chapterContents: [],
            updataIndex: 0,
            schoolTerm: 0
        };
    },
    created() {
        this.getSchoolTerm();
    },
    methods: {
        getTemplate() {
            let params = {
                templateId: this.templateId,
                type: this.type
            };
            if (this.type == "2") {
                params = {
                    cultureId: this.templateId,
                    type: this.type
                };
            }
            getChapterTemplete(params).then(({ code, data }) => {
                if (code === 200) {
                    this.chapterContents = data.chapterContents;
                    if (data.oldFlag == 1 && this.type == "2") {
                        this.$eduAlert('方案正在变更中不能查看!', '提示', {
                            confirmButtonText: '确定',
                            type: 'warning'
                        }).finally(() => {
                            this.back();
                        });
                    }
                }
            });
        },
        getLargeFormat(num) {
            return `${this.$utils.numberToChinese(num)}、`;
        },
        back() {
            this.$emit('back');
        },
        exportPdf() {
            let path = `/api/cultureservice/minorCultureSchemePre/exportMinorCultureSchemePdf?id=${this.templateId}&language=${this.$store.getters.language}`;
            window.open(path);
        },
        exportDoc() {
            let path = `/api/cultureservice/minorCultureSchemePre/exportMinorCultureSchemeWord?id=${this.templateId}&language=${this.$store.getters.language}`;
            window.open(path);
        },
        getSchoolTerm() {
            this.schoolTermLoad = false;
            let promise;
            if (this.type == 1) {
                promise = queryTemplateInfo(this.templateId).then(res => {
                    if (res && res.code == 200) {
                        this.schoolTerm = (res.data || {}).schoolTerm || 0;
                    }
                })
            }else {
                let param = {cultureId: this.templateId};
                promise = findSchoolTermByCultureId(param).then(res => {
                    if (res && res.code == 200) {
                        this.schoolTerm = (res.data || {}).finalSchoolTerm || 0;
                    }
                })
            }
            promise.finally(() => {
                this.getTemplate();
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.edu-page-title {
    border-bottom: 2px solid rgba(210, 212, 214, 1);
}
</style>
